<template>
  <el-table :data="inspectResultsTable" style="width: 100%" height="170">
    <el-table-column
      prop="alarmCategory"
      align="center"
      :label="$t('告警项')"
      show-overflow-tooltip
    >
    </el-table-column>
    <el-table-column
      prop="alarmLevel"
      align="center"
      :label="$t('告警等级')"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <div
          :class="[
            scope.row.alarmLevel == '4' ? 'critical' : '',
            scope.row.alarmLevel == '3' ? 'severity' : '',
            scope.row.alarmLevel == '2' ? 'common' : '',
            scope.row.alarmLevel == '1' ? 'early' : '',
            scope.row.alarmLevel == '0' ? 'normal' : '',
          ]"
        >
          {{ scope.row.alarmLevel | getAlarmLevel(that) }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="center"
      prop="alarmContent"
      :label="$t('告警内容')"
    ></el-table-column>
    <el-table-column
      align="center"
      prop="startTime"
      :label="$t('告警开始时间')"
      show-overflow-tooltip
    ></el-table-column>
    <el-table-column
      align="center"
      prop="endTime"
      :label="$t('告警结束时间')"
      show-overflow-tooltip
    ></el-table-column>
    <!-- <el-table-column align="center" prop="handleStatus" label="处理状态">
      <template slot-scope="scope">
        <div
          :style="{
            color: scope.row.handleStatus == 0 ? 'gray' : 'green',
          }"
        >
          {{ scope.row.handleStatus == 0 ? "未处理" : " 已处理" }}
        </div>
      </template>
    </el-table-column> -->
    <!-- <el-table-column label="操作" width="70" align="center">
      <template slot-scope="scope">
        <div @click="handleClick(scope.row)" class="serch-btn column-btn">
          处理
        </div>
      </template>
    </el-table-column> -->
  </el-table>
</template>
<script>
/**
 * 系统告警
 */
import { API_systemalarmInfo } from "@/api/data/alarm.js";
export default {
  name: "",
  props: {},
  data() {
    return {
      that: this,
      // 表格数据
      inspectResultsTable: [],
      tableTimer: null,
    };
  },
  created() {
    this.getsystemAlarminfo();
  },
  mounted() {
    this.tableTimer = setInterval(() => {
      this.getsystemAlarminfo();
    }, 1000);
  },
  computed: {},
  methods: {
    /**获取系统告警 */
    getsystemAlarminfo() {
      API_systemalarmInfo({
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.inspectResultsTable = res.rows;
          }
          if (this.inspectResultsTable.length > 100)
            this.inspectResultsTable.length = 100;
        } else {
          this.inspectResultsTable = [];
          this.$modal.msgError("获取巡检结果失败");
        }
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.tableTimer);
    this.tableTimer = null;
  },
};
</script>

<style scoped lang="scss">
.column-btn {
  display: flex;
  width: 46px;
  height: 28px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.critical {
  color: #ff5562;
}
.severity {
  color: #ff7000;
}
.common {
  color: #ffad30;
}
.early {
  color: #cc77dc;
}
.normal {
  color: #73f6af;
}
</style>
